<template>
    <div class="leftDiv">
        <div class="useDetail">
            <TitleStyle name="教室使用情况" width="242" height="32"></TitleStyle>
            <div class="detTable">
                <el-table height="170px" v-loading="loading" element-loading-text="查询中..." stripe size="small"
                    :data="bigScreenStore.classInfoList" sortable="custom" @sort-change="handleSortChange"
                    @selection-change="handleSelectionChange">

                    <el-table-column label="校区" prop="sclArea" align="center">
                        <template #default="scope">{{ scope.row.sclArea }}</template>
                    </el-table-column>
                    <el-table-column label="教学楼" prop="sclFloor" align="center">
                        <template #default="scope">{{ scope.row.sclFloor }}</template>
                    </el-table-column>
                    <el-table-column label="教室数" prop="roomNum" align="center">
                        <template #default="scope">{{ scope.row.roomNum }}</template>
                    </el-table-column>
                    <el-table-column label="已用" prop="used" align="center">
                        <template #default="scope">
                            <span style="color: #1CDDB7;"> {{ scope.row.used }}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column label="空闲" prop="noUse" align="center">
                        <template #default="scope">

                            <span style="color: #FF9600;">{{ scope.row.noUse }}</span>
                        </template>
                    </el-table-column>

                </el-table>
            </div>
        </div>
        <div class="useRate">
            <div class="rightTitle">
                <TitleStyle name="教室使用频次" width="242" height="32"></TitleStyle>
            </div>
            <div class="middleBox">
                <div class="leftBox">
                    <div class="middleTitleL">
                        使用频次最高
                    </div>
                    <div class="middleLData" v-for=" item in useTallList">
                        <div class="desc">教室：{{ item.roomName || '-' }}</div>
                        <el-progress :percentage="100" :stroke-width="8">
                            <span>{{ item.useTime }}次</span>
                        </el-progress>
                    </div>
                </div>
                <div class="rightBox">
                    <div class="middleTitleR">
                        使用频次最低
                    </div>
                    <div class="middleRData" v-for=" item in useshortList">
                        <div class="desc">教室：{{ item.roomName || '-' }}</div>
                        <el-progress :percentage="100" :stroke-width="8">
                            <span>{{ item.useTime }}次</span>
                        </el-progress>
                    </div>
                </div>
            </div>
        </div>
        <div class="cardRecord">
            <div class="rightTitle">
                <TitleStyle name="最新刷卡记录" width="242" height="32"></TitleStyle>
            </div>
            <div style="padding: 17px 27px 5px 37px; height: 180px;">
                <div class="items" v-for="(item, index) in cardRecord">
                    <div class="rank no1" v-if="index === 0">{{ index + 1 }}</div>
                    <div class="rank no2" v-if="index === 1">{{ index + 1 }}</div>
                    <div class="rank no3" v-if="index === 2">{{ index + 1 }}</div>
                    <div class="rank no4" v-if="index > 2">{{ index + 1 }}</div>
                    <div style="width: 45px;">{{ item.name || '-' }}</div>
                    <div>{{ item.roomName || '-' }}</div>
                    <div>{{ item.actionTime || '-' }}</div>
                </div>
            </div>

        </div>
        <div class="workRecord">
            <div class="rightTitle">
                <TitleStyle name="最新工单记录" width="242" height="32"></TitleStyle>
            </div>
            <div style="padding: 17px 27px 5px 37px; height: 150px; overflow-y: scroll;">
                <div class="items" v-for="(item, index) in workRecord">
                    <div class="rank no1" v-if="index === 0">{{ index + 1 }}</div>
                    <div class="rank no2" v-if="index === 1">{{ index + 1 }}</div>
                    <div class="rank no3" v-if="index === 2">{{ index + 1 }}</div>
                    <div class="rank no4" v-if="index > 2">{{ index + 1 }}</div>
                    <div>{{ item.room || '-' }}</div>
                    <div>{{ item.description || '-' }}</div>
                    <div>{{ dayjs(item.createTime).format('YYYY/MM/DD HH:mm:ss') || '-' }}</div>
                </div>
            </div>

        </div>


    </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
import dayjs from "dayjs"
import TitleStyle from '@/components/big-screen/TitleStyle.vue';
import EsAjax from '@/utils/EsAjax';
import ApiUrls from '@/apis/index';
import useBigScreenStore from '@/stores/useBigScreenStore';
const bigScreenStore = useBigScreenStore()
const floorId = ref()
const campusId = ref()
const cardRecord = ref([

])
const dataOfTable = ref([


])
const useTallList = ref([])
const useshortList = ref([])
const workRecord = ref([])
const getRoomUseRate = (floorId = 0, campusId = 0) => {
    let params = {
        limit: 120,
        order: 'desc',
        buildingId: floorId,
        campusId
    }
    EsAjax.post(ApiUrls.getRoomUseRate, params).then(res => {
        if (res.data.code === 200) {
            useTallList.value = res.data.data

            params.order = 'asc'
            EsAjax.post(ApiUrls.getRoomUseRate, params).then(res => {
                useshortList.value = res.data.data
            })

        }
    })
}
const getCardRecord = () => {
    let params = {
        sort: "id",
        order: "desc",
        limit: 6,
        page: 1,
        offset: 0
    }
    EsAjax.post(ApiUrls.getCardRecord, params).then(res => {
        console.log(res);
        if (res.data.code === 200) {
            cardRecord.value = res.data.data.list
        }
    })
}
const getWorkRecord = () => {
    let params = {
        sort: "UpdateTime",
        order: "desc",
        limit: 5
    }
    EsAjax.post(ApiUrls.getWorkRecord, params).then(res => {
        console.log(res);
        if (res.data.code === 200) {
            workRecord.value = res.data.data.list
        }

    })
}
// const getRoomDetail = (floorId = 0, campusId = 0) => {

// }

watch(() => [bigScreenStore.floorId, bigScreenStore.campusId], ([nfl, nca], [ofl, oca]) => {
    if (nfl === ofl && nca != oca) {
        floorId.value = 0
        campusId.value = nca
    }
    if (nca === oca && nfl != ofl) {
        floorId.value = nfl
        campusId.value = 0
    }
    getRoomUseRate(floorId.value, campusId.value)
    bigScreenStore.getRoomDetail(floorId.value, campusId.value)
    bigScreenStore.getBuildUseage(floorId.value, campusId.value)

})
onMounted(() => {
    getCardRecord()
    getWorkRecord()
    getRoomUseRate(floorId.value, campusId.value)
    bigScreenStore.getRoomDetail(floorId.value, campusId.value)
    bigScreenStore.getBuildUseage(floorId.value, campusId.value)
})
</script>

<style lang="scss" scoped>
.el-table {
    --el-table-tr-bg-color: rgba(17, 135, 149, .5);
}

:deep(.el-table__header thead tr) {
    background-color: rgba(17, 135, 149, .5) !important;
}

.leftDiv {
    position: absolute;
    top: 0;
    left: 0;
    margin-left: 27px;
    margin-top: 83px;
    width: 120px;
    height: 560px;
    z-index: 105;

    .useDetail {
        width: 400px;
        height: 206px;
        border-radius: 10px;
        margin-bottom: 17px;
        background: linear-gradient(179deg, rgba(0, 73, 171, 0.2) 0%, rgba(0, 76, 170, 0.3) 47%, rgba(0, 85, 170, 0.08) 100%);

        // .detTable {
        //     padding: 0 17px;
        // }
    }

    .cardRecord {
        width: 400px;
        height: 256px;
        border-radius: 10px;
        margin-bottom: 17px;
        background: linear-gradient(179deg, rgba(0, 73, 171, 0.2) 0%, rgba(0, 76, 170, 0.3) 47%, rgba(0, 85, 170, 0.08) 100%);

        .items {
            display: flex;
            align-items: center;
            margin-bottom: 12px;

            font-size: 14px;

            .rank {
                width: 18px;
                height: 18px;
                border-radius: 50%;
                background-color: #1886DF;
                text-align: center;
                line-height: 18px;
                margin-right: 21px;
            }

            .no1 {
                background-color: #FF8800;

            }

            .no2,
            .no3 {
                background-color: #F3BD47;

            }

            >div:nth-of-type(2) {
                margin-right: 21px;
            }

            >div:nth-of-type(3) {
                color: #1CDDB7;
            }

            >div:nth-of-type(4) {
                flex: 1;
                text-align: right;
                color: rgba($color: #fff, $alpha: 0.5);
            }
        }
    }

    .workRecord {
        width: 400px;
        height: 226px;
        border-radius: 10px;
        background: linear-gradient(179deg, rgba(0, 73, 171, 0.2) 0%, rgba(0, 76, 170, 0.3) 47%, rgba(0, 85, 170, 0.08) 100%);

        .items {
            display: flex;
            align-items: center;
            margin-bottom: 12px;

            font-size: 14px;

            .rank {
                width: 18px;
                height: 18px;
                border-radius: 50%;
                background-color: #1886DF;
                text-align: center;
                line-height: 18px;
                margin-right: 21px;
            }

            .no1 {
                background-color: #FF8800;

            }

            .no2,
            .no3 {
                background-color: #F3BD47;

            }

            >div:nth-of-type(2) {
                margin-right: 21px;
            }

            >div:nth-of-type(3) {
                color: #29BAFB;
            }

            >div:nth-of-type(4) {
                flex: 1;
                text-align: right;
                color: rgba($color: #fff, $alpha: 0.5);
            }
        }
    }

    .useRate {
        width: 400px;
        height: 246px;
        border-radius: 10px;
        margin-bottom: 17px;
        background: linear-gradient(179deg, rgba(0, 73, 171, 0.2) 0%, rgba(0, 76, 170, 0.3) 47%, rgba(0, 85, 170, 0.08) 100%);

        .middleBox {
            width: 370px;
            height: 186px;
            margin-top: 15px;
            overflow-y: scroll;
            padding: 0 15px;
            display: flex;
            justify-content: space-between;

            .leftBox {
                width: 50%;
                margin-right: 40px;

                .middleTitleL {
                    font-size: 14px;
                    font-family: Source Han Sans CN, Source Han Sans CN;
                    font-weight: 400;
                    color: #1CDDB7;
                }

                .middleLData {
                    margin-top: 16px;

                    ::v-deep(.el-progress-bar__inner) {

                        background: linear-gradient(to left, #44D7B6 0%, #00FFF4 0%, rgba(68, 215, 182, 0) 100%);
                    }

                    ::v-deep(.el-progress__text) {
                        color: #0DB895;
                    }

                    .desc {
                        font-size: 12px;
                        font-family: SourceHanSansCN-Regular, SourceHanSansCN-Regular;
                        font-weight: normal;
                        color: #fff;
                        opacity: .3;
                        margin-bottom: 7px;
                    }
                }
            }

            .rightBox {
                width: 50%;

                .middleTitleR {
                    font-size: 14px;
                    font-family: Source Han Sans CN, Source Han Sans CN;
                    font-weight: 400;
                    color: #2ABAFC;
                }

                .middleRData {
                    margin-top: 16px;

                    ::v-deep(.el-progress-bar__inner) {

                        background: linear-gradient(to left, #44D7B6 0%, #2ABDFF 0%, rgba(68, 215, 182, 0) 100%);
                    }

                    ::v-deep(.el-progress__text) {
                        color: #2ABDFF;
                    }

                    .desc {
                        font-size: 12px;
                        font-family: SourceHanSansCN-Regular, SourceHanSansCN-Regular;
                        font-weight: normal;
                        color: #fff;
                        opacity: .3;
                        margin-bottom: 7px;
                    }
                }
            }
        }
    }


}
</style>